<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools
          :node-data="company"
          :is-root="true"
          @addDepartment="addDepartment"
        />
        <!-- 以上是公司数据 -->
        <hr>
        <el-tree
          :data="departs"
          :default-expand-all="true"
          :expand-on-click-node="false"
        >
          <template #default="{data}">
            <TreeTools
              :node-data="data"
              :is-root="false"
              @delDepartment="getDepartments"
              @addDepartment="addDepartment"
              @editDepartment="editDepartment"
            />
          </template>
        </el-tree>
      </el-card>
      <AddDept
        ref="addDept"
        :show-dialog.sync="showDialog"
        :node-data="nodeData"
        @addDepartment="getDepartments"
      />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
import AddDept from './components/add-dept.vue'
import { listToTreeData } from '@/utils'
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      showDialog: false,
      nodeData: {},
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      departs: []
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    addDepartment(nodeData) {
      this.nodeData = nodeData
      this.showDialog = true
    },
    async getDepartments() {
      // 获取源数据
      const { depts } = await getDepartments()
      this.departs = listToTreeData(depts, '')
      // 经过树形转换放入渲染列表中
      //   this.departs = this.listToTreeData(depts, '')
      // },
      // listToTreeData(list, topPid) {
      //   // // 算法一, 递归从父部门找子部门的算法
      //   // // 根据传入的 topPid 查找列表中符合这个pid的集合
      //   // const res = []
      //   // list.forEach(element => {
      //   //   if (element.pid === topPid) {
      //   //     // 每当找到一个当前级别的部门
      //   //     // 就以这个部门的id作为下一次的搜索pid
      //   //     element.children = this.listToTreeData(list, element.id)
      //   //     res.push(element)
      //   //   }
      //   // })
      //   // return res

      //   // 算法二, 从子部门找父部门的算法
      //   list.forEach(element => {
      //     if (element.pid !== topPid) {
      //       // 如果 pid 不为空, 就必然是子部门
      //       // 找出自己的父部门送上门
      //       const parent = list.find(el => el.id === element.pid)
      //       if (parent) {
      //         parent.children = parent.children || []
      //         parent.children.push(element)
      //       }
      //     }
      //   })

    //   return list.filter(el => el.pid === topPid)
    },
    async editDepartment(nodeData) {
      // 只有树形点击弹窗的这一刻
      // 才知道是编辑, 而且才知道到底编辑谁
      // 这里是父组件, 回显的函数要放在子组件
      await this.$refs.addDept.getDepartmentDetail(nodeData.id)
      this.nodeData = nodeData
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
.pointer {
  cursor: pointer;
}
</style>
